<template>
	<uni-popup ref="updateRef" type="center" border-radius="32rpx 32rpx 32rpx 32rpx" :mask-click="false">
		<view class="popup-content">
			<view class="content">
				<image class="content-top" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/update_top.png" mode="widthFix"></image>
				<text class="content-top-text">发现新版本~</text>
				<text class="content-top-versions">v{{ versionInfo.version }}</text>

				<view class="content-center">
					<view class="box-des">更新日志</view>
					<view class="box-scroll">
						<text class="box-des">{{ versionInfo.intro }}</text>
					</view>
					<view class="update_sub xjs-btn-primary" :class="{ loading: versionInfo.downloading || versionInfo.installing }" @tap="versionInfo.update">
						<text>{{ text_submit }}</text>
						<text v-if="versionInfo.downloading">{{ versionInfo.downloadProgress }}%</text>
						<view v-if="versionInfo.downloading || versionInfo.installing" class="loading-icon" style="zoom: 0.8"></view>
					</view>
					<view v-if="!versionInfo.force" class="update_cancel" @tap="versionInfo.cancel">取消</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, computed } from 'vue';
import api from '@/api';
const text_submit = computed(() => {
	return versionInfo.installing ? '安装中' : versionInfo.downloading ? '下载中' : '更新';
});
const versionInfo = reactive({
	force: false, //是否强制更新
	// stop_download: false,
	downloadProgress: 0, //下载进度
	downloading: false, //下载
	installing: false, //安装
	downUrl: '', //下载的url
	version: '', //版本号
	intro: '', //版本介绍
	isWgt:false,
	cancel: () => {
		if (versionInfo.downloading) {
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '下载中，请稍后重试！'
			});
			return;
		}
		if (versionInfo.installing) {
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '安装中，请稍后重试！'
			});
			return;
		}
		updateRef.value.close();
	},
	cancelUpdate: () => {},
	update: () => {
		const ua = uni.getSystemInfoSync().platform; //android - ios
		if(ua == 'ios' && !versionInfo.isWgt){
			 // ios整包更新需跳转store上更新
			plus.runtime.openURL(versionInfo.downUrl);
			return
		}
		if (versionInfo.downloading) {
			return;
		}
		versionInfo.downloading = true;
		const downloadTask = uni.downloadFile({
			url: versionInfo.downUrl,
			success: (res) => {
				versionInfo.downloading = false;
				if (res.statusCode === 200) {
					versionInfo.installing = true;
					// 安装
					plus.runtime.install(
						res.tempFilePath, // 要安装的文件路径
						{ force: false }, // 应用安装设置的参数
						() => {
							// 热更新后需要重启应用才生效
							plus.runtime.restart();
							versionInfo.installing = false;
						},
						(error) => {
							// 安装失败的回调
							versionInfo.installing = false;
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '安装失败，请稍后重试！'
							});
						}
					);
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '下载失败，请稍后重试！'
					});
				}
			}
		});
		downloadTask.onProgressUpdate((res) => {
			versionInfo.downloadProgress = res.progress;
			if (res.progress >= 100) {
				versionInfo.downloadProgress = 0;
			}
		});
	}
});
const updateRef = ref();
const check = () => {
	console.log(uni.getSystemInfoSync())
	// #ifdef APP
	versionInfo.downloadProgress = 0;
	versionInfo.downloading = false;
	versionInfo.installing = false;
	versionInfo.force = false;
	versionInfo.intro = '';
	versionInfo.version = '';
	versionInfo.isWgt = false;
	uniCloud
		.callFunction({
			name: 'versionUpdate'
		})
		.then((res) => {
			console.log(res)
			versionInfo.force = res.result.force;
			versionInfo.intro = res.result.intro;
			const ua = uni.getSystemInfoSync().platform; //android - ios
			const appVersion = uni.getSystemInfoSync().appWgtVersion; //当前app版本
			const { android_version, android_url, ios_version, ios_url, wgt_version, wgt_url } = res.result;
			console.log(appVersion)
			switch (ua) {
				case 'android':
					//优先更新整包 - ios同理
					//整包版本必现在版本高时更新整包
					if (android_url && compareVersions(android_version, appVersion) == 1) {
						versionInfo.version = res.result.android_version;
						versionInfo.downUrl = res.result.android_url;
						versionInfo.isWgt = false
						updateRef.value.open();
					} else if (wgt_url && compareVersions(wgt_version, appVersion) == 1) {
						versionInfo.version = res.result.wgt_version;
						versionInfo.downUrl = res.result.wgt_url;
						versionInfo.isWgt = true
						updateRef.value.open();
					}

					break;
				case 'ios':
					if (ios_url && compareVersions(ios_version, appVersion) == 1) {
						versionInfo.version = res.result.ios_version;
						versionInfo.downUrl = res.result.ios_url;
						versionInfo.isWgt = false
						updateRef.value.open();
					} else if (wgt_url && compareVersions(wgt_version, appVersion) == 1) {
						versionInfo.version = res.result.wgt_version;
						versionInfo.downUrl = res.result.wgt_url;
						versionInfo.isWgt = true
						updateRef.value.open();
					}
					break;
			}
		});
	// #endif
};

const compareVersions = (version1, version2) => {
	const v1Parts = version1.split('.');
	const v2Parts = version2.split('.');
	for (let i = 0; i < v1Parts.length; i++) {
		const num1 = Number(v1Parts[i]);
		const num2 = Number(v2Parts[i]);
		if (num1 > num2) {
			return 1;
		}
		if (num1 < num2) {
			return -1;
		}
	}
	return 0;
	//0 - 版本相对，-1 - 版本1小于版本2  1- 版本1大一版本二
};
defineExpose({
	check
});
</script>

<style lang="scss" scoped>
@import '@/styles/common/animation.scss';
.popup-content {
	padding-bottom: 30vh;
	z-index:120;
	.content {
		width: 550rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
		font-family: Source Han Sans CN;
		.content-top {
			width: 550rpx;
			margin-top: -100rpx;
		}
		.content-top-text {
			font-size: 44rpx;
			font-weight: 600;
			color: #f8f8fa;
			position: absolute;
			top: -10rpx;
			left: 40rpx;
			z-index: 1;
		}
		.content-top-versions {
			border-radius: 50px;
			background: rgba(252, 74, 74, 1);
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			padding: 0rpx 10rpx;
			color: rgba(255, 255, 255, 1);
			position: absolute;
			top: 60rpx;
			left: 40rpx;
			z-index: 1;
		}
		.content-center {
			position: absolute;
			top: 180rpx;
			left: 0;
			z-index: 1;
			padding: 0 40rpx 40rpx;
			box-sizing: border-box;
			width: 100%;
			background-color: #fff;
			border-radius: 0 0 24rpx 24rpx;
			.box-scroll {
				max-height: 300rpx;
				overflow-y: scroll;
				margin-bottom: 40rpx;
			}
			.box-des {
				font-size: 26rpx;
				color: #000000;
				line-height: 50rpx;
				font-weight: bold !important;
			}
			.update_sub {
				height: 76rpx !important;
				font-size: 24rpx !important;
			}
			.update_cancel {
				margin: 32rpx 0 0;
				text-align: center;
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
</style>
